// $(function() {
//     $('.monitor .tabs').on('click', 'a', function() {
//         $(this).addClass('active').siblings("a").removeClass("active");
//         var index = $(this).index();
//         $('.monitor .content').eq(index).show().siblings(".content").hide();
//     });
//     //复制一份
//     $('.marquee-view .marquee').each(function() {
//             var zheb = $(this).children().clone();
//             $(this).append(zheb);
//         })
//         //引入饼状图

//     // 点位分布统计模块

//     var myChart = echarts.init(document.querySelector(".pie"));
//     // 2. 指定配置项和数据
//     var option = {
//         tooltip: {
//             trigger: "item",
//             formatter: "{a} <br/>{b} : {c} ({d}%)"
//         },

//         series: [{
//             name: "面积模式",
//             type: "pie",
//             radius: [30, 60],
//             center: ["75%", "50%"],
//             roseType: "area",
//             data: [
//                 { value: 10, name: "rose1" },
//                 { value: 5, name: "rose2" },
//                 { value: 15, name: "rose3" },
//                 { value: 25, name: "rose4" },
//                 { value: 20, name: "rose5" },
//                 { value: 35, name: "rose6" },
//                 { value: 30, name: "rose7" },
//                 { value: 40, name: "rose8" }
//             ]
//         }]
//     };

//     // 3. 配置项和数据给我们的实例化对象
//     myChart.setOption(option);


// });
// 监控区域模块制作
(function() {
    $(".monitor .tabs").on("click", "a", function() {
        $(this)
            .addClass("active")
            .siblings("a")
            .removeClass("active");

        // console.log($(this).index());
        //   选取对应索引号的content
        $(".monitor .content")
            .eq($(this).index())
            .show()
            .siblings(".content")
            .hide();
    });
    // 1. 先克隆marquee里面所有的行（row）
    $(".marquee-view .marquee").each(function() {
        // console.log($(this));
        var rows = $(this)
            .children()
            .clone();
        $(this).append(rows);
    });
})();
// 点位分布统计模块
(function() {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".pie"));
    // 2. 指定配置项和数据
    var option = {
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 注意颜色写的位置
        color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff"
        ],
        series: [{
            name: "点位统计",
            type: "pie",
            // 如果radius是百分比则必须加引号
            radius: ["10%", "60%"],
            center: ["50%", "50%"],
            roseType: "radius",
            data: [
                { value: 20, name: "云南" },
                { value: 26, name: "北京" },
                { value: 24, name: "山东" },
                { value: 25, name: "河北" },
                { value: 20, name: "江苏" },
                { value: 25, name: "浙江" },
                { value: 30, name: "四川" },
                { value: 42, name: "湖北" }
            ],
            // 修饰饼形图文字相关的样式 label对象
            label: {
                fontSize: 10
            },
            // 修饰引导线样式
            labelLine: {
                // 连接到图形的线长度
                length: 6,
                // 连接到文字的线长度
                length2: 8
            }
        }]
    };
    // 3. 配置项和数据给我们的实例化对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();
(function() {
    // 中间省略的数据  准备三项
    var item = {
            name: '',
            value: 1200,
            // 柱子颜色
            itemStyle: {
                color: '#254065'
            },
            // 鼠标经过柱子颜色
            emphasis: {
                itemStyle: {
                    color: '#254065'
                }
            },
            // 工具提示隐藏
            tooltip: {
                extraCssText: 'opacity:0'
            },
        }
        // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".bar"));
    // 2. 指定配置和数据
    var option = {
        // 修改线性渐变色方式 1
        color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0, 0, 0, 1, [
                { offset: 0, color: '#00fffb' }, // 0 起始颜色
                { offset: 1, color: '#0061ce' } // 1 结束颜色
            ]
        ),
        // 直角坐标系内绘图网格（区域）


        // 工具提示
        tooltip: {
            // 触发类型  经过轴触发axis  经过轴触发item
            trigger: 'item',
            // 轴触发提示才有效

        },
        // 图表边界控制
        grid: {
            top: '3%',
            right: '3%',
            bottom: '3%',
            left: '0%',
            //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
            containLabel: true,
            // 是否显示直角坐标系网格
            show: true,
            //grid 四条边框的颜色
            borderColor: 'rgba(0, 240, 255, 0.3)'
        },
        // 控制x轴
        series: [{
            // 图表数据名称
            name: '用户统计',
            // 图表类型
            type: 'bar',
            // 柱子宽度
            barWidth: '90%',
            // 数据
            data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
        }],
        // 控制x轴
        xAxis: [{
            // 使用类目，必须有data属性
            type: 'category',
            // 使用 data 中的数据设为刻度文字
            data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
            axisTick: {
                // true意思：图形和刻度居中中间
                // false意思：图形在刻度之间
                alignWithLabel: false,
                // 不显示刻度
                show: false
            },
            // x坐标轴文字标签样式设置
            axisLabel: {
                color: '#4c9bfd'
            },
            // x坐标轴颜色设置
            axisLine: {
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)',
                    // width:8,  x轴线的粗细
                    // opcity: 0,   如果不想显示x轴线 则改为 0
                }
            }
        }],
        // 控制y轴
        yAxis: [{
            axisTick: {
                // 不显示刻度
                show: false
            },
            // y坐标轴文字标签样式设置
            axisLabel: {
                color: '#4c9bfd'
            },
            // y坐标轴颜色设置
            axisLine: {
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)',
                    // width:8,  x轴线的粗细
                    // opcity: 0,   如果不想显示x轴线 则改为 0
                }
            },
            // y轴 分割线的样式 
            splitLine: {
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)'
                }
            }
        }],

    };

    // 3. 把配置给实例对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放8+

    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });

})();
//折线图引入
(function() {
    var data = {
            year: [
                [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                [200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200]
            ],
            quarter: [
                [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
                [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
            ],
            month: [
                [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
                [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
            ],
            week: [
                [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
                [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
            ]
        }
        //1实例化对象
    var myChart = echarts.init(document.querySelector('.line'));

    //配置实例对象
    var option = {
        tooltip: {
            //通过坐标轴出发
            trigger: "axis"
        },

        legend: {
            data: ["预期销售额", "实际销售额"],
            textStyle: {
                color: '#4c9bfd' // 图例文字颜色
            },
            right: '10%' // 距离右边10%
        },
        grid: {
            top: '20%',
            left: "3%",
            right: "4%",
            bottom: "3%",
            show: true,
            borderColor: '#012f4a',
            containLabel: true
        },

        xAxis: {
            type: "category",
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisTick: {
                show: false //去除刻度线
            },
            axisLabel: {
                color: '#4c9bfd' // 文本颜色
            },
            axisLine: {
                show: false // 去除轴线
            },
            boundaryGap: false, // 去除轴内间距
        },
        yAxis: {
            type: "value",
            axisTick: {
                show: false // 去除刻度
            },
            axisLabel: {
                color: '#4c9bfd' // 文字颜色
            },
            splitLine: {
                lineStyle: {
                    color: '#012f4a' // 分割线颜色
                }
            }
        },
        color: ['#00f2f1', '#ed3f35'],
        series: [{
                name: '预期销售额',
                data: data.year[0],
                type: 'line',
                // 折线修饰为圆滑
                smooth: true,
            }, {
                name: '实际销售额',
                data: data.year[1],
                type: 'line',
                smooth: true,
            },

        ]
    };
    //放入实例对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放8+

    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
    $('.sales .caption').on('click', 'a', function() {
        $(this).addClass('active').siblings().removeClass('active')
        var arr = data[this.dataset.type];
        option.series[0].data = arr[0];
        option.series[1].data = arr[1];
        myChart.setOption(option);
        // index = $(this).index() - 1;
        index = $('.sales .caption a').index(this);
    })
    var as = $(".sales .caption a");
    var index = 0;
    var timer = setInterval(function() {
        index++;
        if (index == 4) { index = 0; }
        as.eq(index).click();
    }, 1000);
    $('.sales').hover(function() {
        clearInterval(timer);
    }, function() {
        clearInterval(timer);
        timer = setInterval(function() {
            index++;
            if (index == 4) { index = 0; }
            as.eq(index).click();
        }, 1000);
    });
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });

})();
//雷达图
(function() {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector('.radar')); // 2.指定配置
    var dataBJ = [
        [300, 250, 300, 5, 200, 100, 100]
    ];
    var lineStyle = {
        normal: {
            width: 1,
            opacity: 0.5,
            color: '#fff'

        }
    };

    var option = {
        // backgroundColor: "#161627",
        radar: {

            radius: '50%',
            indicator: [
                { name: "生命值", max: 300 },
                { name: "护甲", max: 250 },
                { name: "魔抗", max: 300 },
                { name: "物理", max: 5 },
                { name: "魔法", max: 200 },
                { name: "攻速", max: 100 }
            ],
            shape: "circle",
            splitNumber: 4,
            name: {
                textStyle: {
                    color: "#4c9bfd"
                }
            },
            splitLine: {
                lineStyle: {
                    color: [
                        "rgba(255, 255, 255, 0.6)",

                    ].reverse()
                }
            },
            areaStyle: {
                color: "rgba(238, 197, 102, 0.6)"
            },
            splitArea: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.5)"
                }
            },

        },
        tooltip: {
            show: true,
            // 控制提示框组件的显示位置
            position: ['60%', '10%'],
        },
        series: [{
            name: "北京",
            type: "radar",
            lineStyle: lineStyle,
            data: dataBJ,
            symbol: "none",
            // 小圆点（拐点）设置为白色
            itemStyle: {
                color: '#fff'
            },
            areaStyle: {
                opacity: 0.5,
                color: 'aqua',
            },
            // symbol 标记的样式(拐点），还可以取值'rect' 方块 ,'arrow' 三角等
            symbol: 'circle',
            // 拐点的大小  
            SymbolSize: '5',
            // 在圆点上显示相关数据
            // label: {
            //     show: true,
            //     color: '#fff',
            //     fontSize: 10
            // },

        }]
    };
    // 3.把配置和数据给对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();
(function() {
    var myChart = echarts.init(document.querySelector('.gauge'));
    var option = {
        series: [{
            name: "销售进度",
            type: "pie",
            radius: ['130%', '150%'],
            // 移动下位置  套住50%文字
            center: ['48%', '80%'],
            //是否启用防止标签重叠策略
            // avoidLabelOverlap: false,
            labelLine: {
                normal: {
                    show: false
                }
            },
            // 起始角度，支持范围[0, 360]
            startAngle: 180,
            // 鼠标经过不变大
            hoverOffset: 1,
            data: [{
                    value: 150,
                    itemStyle: {
                        // 颜色渐变#00c9e0->#005fc1
                        color: new echarts.graphic.LinearGradient(
                            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                            0,
                            0,
                            0,
                            1, [
                                { offset: 0, color: "#00c9e0" }, // 0 起始颜色
                                { offset: 1, color: "#005fc1" } // 1 结束颜色
                            ]
                        )
                    }
                },
                {
                    value: 50,
                    itemStyle: {
                        color: '#12274d'
                    }
                }, {
                    value: 200,
                    itemStyle: {
                        color: 'transparent'
                    }
                }
            ]
        }]
    };
    // 3. 把数据和配置给实例对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
    console.log(`你是谁${myChart}是我`);
})();
(function() {
    //获取数据
    var hotData = [{
                city: '北京', // 城市
                sales: '25, 179', // 销售额
                flag: true, //  上升还是下降
                brands: [ //  品牌种类数据
                    { name: '可爱多', num: '9,086', flag: true },
                    { name: '娃哈哈', num: '8,341', flag: true },
                    { name: '喜之郎', num: '7,407', flag: false },
                    { name: '八喜', num: '6,080', flag: false },
                    { name: '小洋人', num: '6,724', flag: false },
                    { name: '好多鱼', num: '2,170', flag: true },
                ]
            },
            {
                city: '河北',
                sales: '23,252',
                flag: false,
                brands: [
                    { name: '可爱多', num: '3,457', flag: false },
                    { name: '娃哈哈', num: '2,124', flag: true },
                    { name: '喜之郎', num: '8,907', flag: false },
                    { name: '八喜', num: '6,080', flag: true },
                    { name: '小洋人', num: '1,724', flag: false },
                    { name: '好多鱼', num: '1,170', flag: false },
                ]
            },
            {
                city: '上海',
                sales: '20,760',
                flag: true,
                brands: [
                    { name: '可爱多', num: '2,345', flag: true },
                    { name: '娃哈哈', num: '7,109', flag: true },
                    { name: '喜之郎', num: '3,701', flag: false },
                    { name: '八喜', num: '6,080', flag: false },
                    { name: '小洋人', num: '2,724', flag: false },
                    { name: '好多鱼', num: '2,998', flag: true },
                ]
            },
            {
                city: '江苏',
                sales: '23,252',
                flag: false,
                brands: [
                    { name: '可爱多', num: '2,156', flag: false },
                    { name: '娃哈哈', num: '2,456', flag: true },
                    { name: '喜之郎', num: '9,737', flag: true },
                    { name: '八喜', num: '2,080', flag: true },
                    { name: '小洋人', num: '8,724', flag: true },
                    { name: '好多鱼', num: '1,770', flag: false },
                ]
            },
            {
                city: '山东',
                sales: '20,760',
                flag: true,
                brands: [
                    { name: '可爱多', num: '9,567', flag: true },
                    { name: '娃哈哈', num: '2,345', flag: false },
                    { name: '喜之郎', num: '9,037', flag: false },
                    { name: '八喜', num: '1,080', flag: true },
                    { name: '小洋人', num: '4,724', flag: false },
                    { name: '好多鱼', num: '9,999', flag: true },
                ]
            }
        ]
        //遍历盒子内容
    var supHTML = '';
    $.each(hotData, function(index, item) {
            supHTML += `<li><span>${item.city}</span><span> ${item.sales} <s class=
            ${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;
        })
        //把内容放入盒子
    $('.sup').html(supHTML);
    //高亮显示
    $('.province .sup').on('mouseenter', 'li', function() {
        index = $(this).index();
        render($(this));
    });

    function render(currentEle) {
        currentEle.addClass('active').siblings().removeClass();
        var subHTML = '';
        //遍历数据对象
        $.each(hotData[currentEle.index()].brands, function(index, item) {
            subHTML += `<li><span>${item.name}</span><span>${item.num}<s class=${item.flag ? 'icon-up' : 'icon-down'}></s></span></li>`;
        });
        $('.sub').html(subHTML);
    }
    // 4. 默认把第一个小li处于鼠标经过状态
    var lis = $('.province .sup li');
    lis.eq(0).mouseenter();
    var index = 0;
    var timer = setInterval(function() {
        index++;
        if (index >= 5) index = 0;
        render(lis.eq(index));
    }, 2000);
    $('.province .sup').hover(
        function() {
            clearInterval(timer);
        },
        function() {
            clearInterval(timer);
            timer = setInterval(function() {
                index++;
                if (index >= 5) index = 0;
                lis.eq(index).mouseenter();
            }, 2000);
        }
    );
    //  2. 根据数据渲染各省热销 sup 模块内容
    //     // (1) 遍历 hotData对象
    // var supHTML = "";
    // $.each(hotData, function(index, item) {
    //     // console.log(item);
    //     supHTML += `<li><span>${item.city}</span><span> ${item.sales} <s class=
    // ${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;
    // });
    // // 把生成的5个小li字符串给 sub dom盒子
    // $(".sup").html(supHTML);
    // // 3. 当鼠标进入 tab 的时候
    // // 鼠标经过当前的小li要高亮显示
    // $(".province .sup").on("mouseenter", "li", function() {
    //     index = $(this).index();
    //     render($(this));
    // });

    // // 声明一个函数 里面设置sup当前小li高亮还有 对应的品牌对象渲染
    // // 这个函数需要传递当前元素进去
    // function render(currentEle) {
    //     currentEle
    //         .addClass("active")
    //         .siblings()
    //         .removeClass();
    //     // 拿到当前城市的品牌对象
    //     // console.log($(this).index());
    //     // 可以通过hotData[$(this).index()] 得到当前的城市
    //     // console.log(hotData[$(this).index()]);
    //     // 我们可以通过hotData[$(this).index()].brands 拿到的是城市对象的品牌种类
    //     // console.log(hotData[$(this).index()].brands);
    //     // 开始遍历品牌数组
    //     var subHTML = "";
    //     $.each(hotData[currentEle.index()].brands, function(index, item) {
    //         // 是对应城市的每一个品牌对象
    //         // console.log(item);
    //         subHTML += `<li><span>${item.name}</span><span> ${item.num}<s class=
    // ${item.flag ? "icon-up" : "icon-down"}
    // ></s></span></li>`;
    //     });
    //     // 把生成的6个小li字符串给 sub dom盒子
    //     $(".sub").html(subHTML);
    // }
    // // 4. 默认把第一个小li处于鼠标经过状态
    // var lis = $(".province .sup li");
    // lis.eq(0).mouseenter();
    // // 5 开启定时器
    // var index = 0;
    // var timer = setInterval(function() {
    //     index++;
    //     if (index >= 5) index = 0;
    //     // lis.eq(index).mouseenter();
    //     render(lis.eq(index));
    // }, 2000);

    // $(".province .sup").hover(
    //     // 鼠标经过事件
    //     function() {
    //         clearInterval(timer);
    //     },
    //     // 鼠标离开事件
    //     function() {
    //         clearInterval(timer);
    //         timer = setInterval(function() {
    //             index++;
    //             if (index >= 5) index = 0;
    //             // lis.eq(index).mouseenter();
    //             render(lis.eq(index));
    //         }, 2000);
    //     }
    // );
})();